;(function (w) {
  var pageComponent = Vue.extend({
    template: `<div class="hl-turn-page hl-pagination__container">
      <ul class="hl-pagination__wrap">
        <li class="hl-pagination__first-btn hl-pagination__button" @click="(current = 1) && change(current)">首页</li>
        <li class="hl-pagination__prev-btn hl-pagination__button" @click="(current > 1 && current--) && change(current--)">上一页</li>
        <li
          class="hl-pagination__number-btn hl-pagination__button"
          :class="{page:true, active:current == item}"
          v-for="(item, index) in pages"
          @click="change(item)"
        >{{item}}</li>
        <li class="hl-pagination__next-btn hl-pagination__button" @click="(current < pagetotal && current++) &&　change(current++)">下一页</li>
        <li class="hl-pagination__last-btn hl-pagination__button" @click="(current = pagetotal) && change(current)">尾页</li>
      </ul>
    </div>`,
		model: {
		  prop: 'selected',
		  event:'on-select-item'
		},
    props: {
      total: {
        type: Number,
        default: 0
      },
      displayNum: {
        type: Number,
        default: 5
      },
			selected: {
        type: [Number, String],
        default: 1
      },
    },
    data() {
      return {
        pagetotal: this.total,
        current: 1,
        showItem: this.displayNum
      }
    },
    computed: {
      pages() {
        var page = [];
        if (this.current < this.showItem) {
          var i = Math.min(this.showItem, this.pagetotal);
          while (i) {
            page.unshift(i--);
          }
        } else {
          var middle = this.current - Math.floor(this.showItem / 2),i = this.showItem;

          if (middle > (this.pagetotal - this.showItem)) {
            middle = (this.pagetotal - this.showItem) + 1
          }
          while (i--) {
            page.push(middle++);
          }
        }
        return page
      }
    },
    watch: {
      total (val) {
        this.pagetotal = val;
      },
			selected (val) {
				this.current = val
			}
    },
    methods: {
      change: function(nums) {
        this.current = nums;
        this.$emit('on-select-item', nums)
        this.$emit('change', this.current)
      }
    },
		mounted () {
			this.showItem = this.displayNum
		}
  })

  Vue.component('hl-pagination', pageComponent);
}(window))
